import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:getwidget/colors/gf_color.dart';
import 'package:getwidget/components/radio/gf_radio.dart';
import 'package:getwidget/components/sticky_header/gf_sticky_header_builder.dart';
import 'package:getwidget/types/gf_radio_type.dart';

import '../controllers/gfstickyheaderbuilder_controller.dart';

class GfstickyheaderbuilderView extends GetView<GfstickyheaderbuilderController> {
  List imageList = [
    'assets/images/cliu.jpg',
    'assets/images/dh1.jpg',
    'assets/images/dh2.jpg',
    'assets/images/dh3.jpg',
    'assets/images/dh4.jpg',
    'assets/images/dh5.jpg',
    'assets/images/dh6.jpg',
    'assets/images/flutter.jpg',
  ];
  String avatarPath = 'assets/images/cliu.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('吸顶头部'),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.all(0),
        child: ListView.builder(
          itemCount: imageList.length,
          itemBuilder: (context, index) => GFStickyHeaderBuilder(
          direction: Axis.horizontal,
          stickyContentBuilder: (BuildContext context, double stuckValue) {
            stuckValue = 1.0 - stuckValue.clamp(0.0, 1.0);
            return Column(
              children: [
                Container(
                  height: 40,
                  width: Get.width * 0.3,
                  color: Color.lerp(
                    Color(0xFF549FD8).withOpacity(0.6),
                    Color(0xFF4495EC), 
                    stuckValue
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Text(
                          '商品 $index',
                          style: const TextStyle(color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  // height: 180,
                  width: Get.width * 0.3,
                  child: ListView.builder(
                    physics: ScrollPhysics(),
                    shrinkWrap: true,
                    scrollDirection: Axis.vertical,
                    itemCount: 1,
                    itemBuilder: (BuildContext context, int index) {
                      return SingleChildScrollView(
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 15),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              SizedBox(height: 15),
                              Row(
                                children: [
                                  Obx(() {
                                    return GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 1,
                                      groupValue: controller.groupValue.value,
                                      onChanged: (val) {
                                        print('1:'+val.toString());
                                        controller.groupValue.value = val as int;
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor: GFColors.SUCCESS,
                                      customBgColor: GFColors.SUCCESS,
                                    );
                                  }),
                                  SizedBox(width: 5),
                                  Text('大')
                                ],
                              ),
                              SizedBox(height: 8),
                              Row(
                                children: [
                                  Obx(() {
                                    return GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 2,
                                      groupValue: controller.groupValue.value,
                                      onChanged: (val) {
                                        print('2:'+val.toString());
                                        controller.groupValue.value = val as int;
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor: GFColors.SUCCESS,
                                      customBgColor: GFColors.SUCCESS,
                                    );
                                  }),
                                  SizedBox(width: 5),
                                  Text('中')
                                ],
                              ),
                              SizedBox(height: 8),
                              Row(
                                children: [
                                  Obx(() {
                                    return GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 3,
                                      groupValue: controller.groupValue.value,
                                      onChanged: (val) {
                                        print('3:'+val.toString());
                                        controller.groupValue.value = val as int;
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor: GFColors.SUCCESS,
                                      customBgColor: GFColors.SUCCESS,
                                    );
                                  }),
                                  SizedBox(width: 5),
                                  Text('小')
                                ],
                              ),
                                SizedBox(height: 8),
                              Row(
                                children: [
                                  Obx(() {
                                    return GFRadio(
                                      type: GFRadioType.blunt,
                                      size: 23,
                                      value: 4,
                                      groupValue: controller.groupValue.value,
                                      onChanged: (val) {
                                        print('4:'+val.toString());
                                        controller.groupValue.value = val as int;
                                      },
                                      inactiveIcon: null,
                                      activeBorderColor: GFColors.SUCCESS,
                                      customBgColor: GFColors.SUCCESS,
                                    );
                                  }),
                                  SizedBox(width: 5),
                                  Text('超小')
                                ],
                              ),
                            ],
                          ),
                        ),
                      );
                    }
                  ),
                ),
              ],
            );
          },
          content: Container(
            height: 180,
            width: Get.width * 0.7,
            color: Colors.teal,
            child: Image.asset(
              imageList[index],
              fit: BoxFit.cover, 
              scale: 4.0
              // width: 10, 
              // height: 20
            ),
          ),
        )),
      ),
    );
  }
}
